:root[theme-mode='dark'] {
  pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em;
  }
  code.hljs {
    padding: 3px 5px;
  }
  /*

  Dark style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>

  */
  .hljs {
    color: #ddd;
    background: #303030;
  }
  .hljs-keyword,
  .hljs-selector-tag,
  .hljs-literal,
  .hljs-section,
  .hljs-link {
    color: white;
  }
  .hljs-subst {
    /* default */
  }
  .hljs-string,
  .hljs-title,
  .hljs-name,
  .hljs-type,
  .hljs-attribute,
  .hljs-symbol,
  .hljs-bullet,
  .hljs-built_in,
  .hljs-addition,
  .hljs-variable,
  .hljs-template-tag,
  .hljs-template-variable {
    color: #d88;
  }
  .hljs-comment,
  .hljs-quote,
  .hljs-deletion,
  .hljs-meta {
    color: #979797;
  }
  .hljs-keyword,
  .hljs-selector-tag,
  .hljs-literal,
  .hljs-title,
  .hljs-section,
  .hljs-doctag,
  .hljs-type,
  .hljs-name,
  .hljs-strong {
    font-weight: bold;
  }
  .hljs-emphasis {
    font-style: italic;
  }
}

:root,
:root[theme-mode='light'] {
  pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em;
  }
  code.hljs {
    padding: 3px 5px;
  }
  /*!
    Theme: Tokyo-night-light
    origin: https://github.com/enkia/tokyo-night-vscode-theme
    Description: Original highlight.js style
    Author: (c) Henri Vandersleyen <hvandersleyen@gmail.com>
    License: see project LICENSE
    Touched: 2022
  */
  /*  Comment */
  .hljs-meta,
  .hljs-comment {
    color: #9699a3;
  }
  /* Red */
  /*INFO: This keyword, HTML elements, Regex group symbol, CSS units, Terminal Red */
  .hljs-tag,
  .hljs-doctag,
  .hljs-selector-id,
  .hljs-selector-class,
  .hljs-regexp,
  .hljs-template-tag,
  .hljs-selector-pseudo,
  .hljs-selector-attr,
  .hljs-variable.language_,
  .hljs-deletion {
    color: #8c4351;
  }
  /*Orange */
  /*INFO: Number and Boolean constants, Language support constants */
  .hljs-variable,
  .hljs-template-variable,
  .hljs-number,
  .hljs-literal,
  .hljs-type,
  .hljs-params,
  .hljs-link {
    color: #965027;
  }
  /*  Yellow */
  /* INFO:  	Function parameters, Regex character sets, Terminal Yellow */
  .hljs-built_in,
  .hljs-attribute {
    color: #8f5e15;
  }
  /* cyan */
  /* INFO: Language support functions, CSS HTML elements */
  .hljs-selector-tag {
    color: #166775;
  }
  /* light blue */
  /* INFO: Object properties, Regex quantifiers and flags, Markdown headings, Terminal Cyan, Markdown code, Import/export keywords */
  .hljs-keyword,
  .hljs-title.function_,
  .hljs-title,
  .hljs-title.class_,
  .hljs-title.class_.inherited__,
  .hljs-subst,
  .hljs-property {
    color: #0f4b6e;
  }
  /*Green*/
  /* INFO: Object literal keys, Markdown links, Terminal Green */
  .hljs-selector-tag {
    color: #33635c;
  }
  /*Green(er) */
  /* INFO: Strings, CSS class names */
  .hljs-quote,
  .hljs-string,
  .hljs-symbol,
  .hljs-bullet,
  .hljs-addition {
    color: #485e30;
  }
  /* Blue */
  /* INFO:  	Function names, CSS property names, Terminal Blue */
  .hljs-code,
  .hljs-formula,
  .hljs-section {
    color: #34548a;
  }
  /* Magenta */
  /*INFO: Control Keywords, Storage Types, Regex symbols and operators, HTML Attributes, Terminal Magenta */
  .hljs-name,
  .hljs-keyword,
  .hljs-operator,
  .hljs-keyword,
  .hljs-char.escape_,
  .hljs-attr {
    color: #5a4a78;
  }
  /* white*/
  /* INFO: Variables, Class names, Terminal White */
  .hljs-punctuation {
    color: #343b58;
  }
  .hljs {
    background: #f6f6f7;
    color: rgba(60, 60, 67, 0.78);
  }
  .hljs-emphasis {
    font-style: italic;
  }
  .hljs-strong {
    font-weight: bold;
  }
}

.language-plaintext {
  border-radius: var(--td-radius-medium);
  &::-webkit-scrollbar {
    height: 8px;
    background: transparent;
  }
}

.hljs-code-container + .hljs-code-container {
  margin-top: var(--td-comp-margin-s);
}

.content {
  blockquote {
    margin: 16px 0;
    border-left: 2px solid var(--td-md-divider);
    padding-left: 16px;
    transition: border-color 0.5s;
    p {
      margin: 0;
      font-size: 16px;
      transition: color 0.5s;
    }
  }
  ol {
    list-style: decimal;
    padding-left: 1.25rem;
    margin: 16px 0;
    li {
      overflow-wrap: break-word;
      &::marker {
        content: counter(list-item) '. ';
      }
    }
  }
  li a {
    text-decoration: none;
    pointer-events: none;
    color: var(--td-text-color-secondary);
  }
}
